$(function () {
    var xhr = new XMLHttpRequest()
    xhr.open("get", "../tea.json")
    xhr.send()
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            return xhrtext = JSON.parse(xhr.responseText)
        }
    }
    let str
    setTimeout(function () {
        $(".conFrLis").empty()
        apply(5,xhrtext.news)
    }, 100)
    function apply(b,c){
        for (let i = 0; i < b; i++) {
            str=`
            <li>
                <div class="confrBox">
                    <h4>${c[i].name}</h4>
                    <p>${c[i].text}</p>
                    <a>阅读正文 →</a>
                </div>
                <img src="${c[i].img}" alt="">
            </li>
            `
            $(".conFrLis").append(str)
        }
    }
    function classify(a){
        for (let i = 0; i < xhrtext.news.length; i++) {
            if (xhrtext.news[i].type===a){
            str=`
            <li>
                <div class="confrBox">
                    <h4>${xhrtext.news[i].name}</h4>
                    <p>${xhrtext.news[i].text}</p>
                    <a>阅读正文 →</a>
                </div>
                <img src="${xhrtext.news[i].img}" alt="">
            </li>
            `
            $(".conFrLis").append(str)
        }}
    }
    $(".more").on("click",function (){
        let newArr = xhrtext.news.slice(5)
        apply(newArr.length,newArr)
        $(this).hide()
    })
    $(".classifyLis").on("click","li",function (){
        $(".conFrLis").empty()
        classify($(this).index()+1)
        $(".more").hide()
    })
})